import Scrollbar from '@renderer/components/Scrollbar' // 导入自定义的滚动条组件
import { useDefaultAssistant } from '@renderer/hooks/useAssistant' // 导入用于获取默认助手的自定义 Hook
import { Model } from '@renderer/types' // 导入Model类型
import { FC } from 'react' // 导入 React 的函数组件类型
import styled from 'styled-components' // 导入 styled-components 库，用于编写 CSS-in-JS 样式

import Messages from './components/Messages' // 导入 Messages 组件，用于显示聊天消息列表

interface Props {
  // 定义组件的 props 接口
  route: string // 路由字符串，可能用于根据路由显示不同的内容或行为
  model: Model // 添加model参数
}

const ChatWindow: FC<Props> = ({ route, model }) => {
  // 定义 ChatWindow 函数组件，接收 route 和 model 作为 props
  const { defaultAssistant } = useDefaultAssistant() // 使用 useDefaultAssistant Hook 获取默认的助手配置

  return (
    // 组件的渲染内容
    <Main className="bubble">
      {' '}
      {/* 渲染 Main 组件（一个 styled-component），并添加 "bubble" 类名 */}
      {/* 渲染 Messages 组件，并传入助手配置、模型和路由 */}
      <Messages assistant={{ ...defaultAssistant, model }} route={route} />
    </Main>
  )
}

const Main = styled(Scrollbar)`
  // 使用 styled-components 定义一个名为 Main 的组件，它基于 Scrollbar 组件
  width: 100%; // 宽度占满父容器
  display: flex; // 使用 Flexbox 布局
  flex-direction: row; // Flex 项目水平排列
  justify-content: flex-start; // Flex 项目从起始位置对齐
  margin-bottom: auto; // 底部外边距自动，通常用于将元素推到顶部
  -webkit-app-region: none; // 禁用 Electron 应用的拖拽区域，防止拖拽窗口
  background-color: transparent !important; // 背景颜色设置为透明，并强制覆盖其他样式
  max-height: 100%; // 最大高度占满父容器
`

export default ChatWindow // 导出 ChatWindow 组件作为默认导出
